<template>
  <div class="wrap">
    <div class="container">
      <i @click="returnEvt"></i>
      <h2>忘记密码</h2>
      <div class="ipt-item">
        <label for="telphone">请输入您的账号或手机号</label>
        <input
          type="text"
          v-model="telphone"
          id="telphone"
          placeholder="输入账号或手机号"
        />
      </div>
      <div class="process">
        <p>1/4</p>
      </div>
      <van-button block @click="nextEvt">下一步</van-button>
    </div>
  </div>
</template>

<script setup>
import { Toast } from "vant";
import { reactive, ref } from "vue";
import { useRouter } from 'vue-router';
import { deCodeApi } from "../../utils";

const router = useRouter()

const telphone = ref("");
let info=reactive({})
info=JSON.parse(deCodeApi(sessionStorage.getItem('userInfo')))
function returnEvt(){
    router.push('/mine')
}
function nextEvt(){
    if(telphone.value!=info.phone){
      Toast.fail('与当前登录账号不符')
      return 
    }
    else{
       router.push('/identity')
    }
    // sessionStorage.setItem('forget-phone',JSON.stringify(telphone.value))
}

</script>

<style lang="less" scoped>
@col1:rgb(192, 187, 187);
.wrap {
  width: 100%;
  height: 100%;
  background: url(../../images/wel.webp) no-repeat;
  background-size: 100% 100%;
  position: relative;
  .container {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    padding: 100px 45px 0px;
    .process{
        height: 10vh;
        overflow: hidden;
        p{
            color: @col1;
            width: 100%;
            text-align: center;
            font-size: .7rem;
            margin: 5vh auto;
        }
    }
    i{
    content: '';
    display: block;
    width: 36px;
    height: 36px;
    background: url('../../images/return.png') center center / 36px 36px no-repeat;
    margin-bottom: 2vh ;
    }
    h2 {
      color: white;
      margin-bottom: 40px;
      font-weight: normal;
    }
    .ipt-item {
      color: @col1;
      margin-bottom: 40px;
      font-size: 16px;
      label {
        display: block;
        margin-bottom: 10px;
      }
      input {
        display: block;
        width: 100%;
        background: rgba(0, 0, 0, 0);
        border: none;
        border-bottom: 1px solid #fff;
      }
    }
    .van-button {
      background: rgb(228, 41, 41);
      border: none;
      color: @col1;
      border-radius: 5px;
      margin-bottom: 40px;
    }
  }
}
</style>